<template>
    <div class="wrap">
        <van-form @submit="onSubmit">
           
           
          
            <van-field   name="uploader" label="头像上传">
                <template #input>
                    <van-uploader :max-count="1" :after-read="onReadd" v-model="form.uploader1" />
                </template>
            </van-field>
             
              
               
              
              
               
               

           
                <van-field
                    v-model="form.name"
                    name="name"
                    label="姓名"
                    placeholder="请填写姓名"
                    :rules="[{ required: true, message: '请填写姓名' }]"
                >
                 <template #button>
                <van-button size="small" @click="getApply" type="info">默认审批人</van-button>
              </template>
                </van-field>
               
                <van-field
                    v-model="form.idCard"
                    name="idCard"
                    label="身份证"
                    placeholder="请填写身份证"
                    :rules="[{ required: true, message: '请填写身份证' }]"
                />
               
           
           <van-field
                v-model="form.phone"
                name="phone"
                label="手机号"
                placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field

                name="village"
                label="小区"
                readonly
                @click="villagePicker=true"
                :value="village"
                placeholder="点击选择"
                :rules="[{ required: true, message: '请选择小区' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                提交
                </van-button>
            </div>
        </van-form>
        <van-popup v-model="villagePicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="villageList"
                @confirm="villageConfirm"
                @cancel="villagePicker = false"
            />
        </van-popup>   
    </div>
</template>

<script>
import { Notify,Dialog,Toast } from 'vant';
import axios from 'axios'
import api from '../api/myfriends.js'
    export default {
        data: function () {
            return {
                village:'',
                uploader:[],
                uploader1:[],
                uploader2:[],
                n_place:'',
                danPicker:false,
                fileList:[],
                fileList1:[],
                fileList2:[],
                brandPicker:false,
                bcolorPicker:false,
                ccolorPicker:false,
                ctypePicker:false,
                rightsPicker:false,
                villagePicker:false,
                onlinePicker:false,
                binPicker:false,
                zongPicker:false,
                mianPicker:false,
               
               
               
                    
              
                villageList:[],
              
               
            
                hunPicker:false,
                jiaoyuPicker:false,
                showCalendar:false,
                village:'',
                form:{
                    activationCode:'',
                    "openId": "",
                    "name": "",
                    "communityId": "",
                    "pictureId": "",
                    "idCard": "",
                    "phone": "",
                    "sex": "",
                    "age": '',
                    "building": "",
                    "room": ""
                }
            }
        },
        components: {
           
        },
        created(){
            this.getVillage()
        },
        mounted() {
           
        },
        methods: {
            getVillage(){
               let that=this 
               api.getVillage().then(e=>{
                   that.villageList=e.map(item=>{
                       item.text=item.name
                       return item
                   })
                  
                  
               }).catch(err=>{
                   console.log(err)
               })
            },
            onRead: function(file) {
                let that = this;
                Toast.loading({
                    duration:0,
                    message: '识别中...',
                    forbidClick: true,
                });
                let formData = new FormData();
               
               if(file.length){
                    for(let i=0;i<file.length;i++){
                        formData.append('files', file[0].file);
                    }
               }else{
                  formData.append('file', file.file); 
               }
               
                let config = {
                    headers: {
                        Authorization,
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }
               
                axios.post(zhengmianUrl, formData, config).then(res => {
                   
                    if(res.data.code===100){
                       
                        Toast.clear()
                        if(res.data.result.result.statusCode==400){
                            Notify({ type: 'warning', message: '身份识别不全' });
                        }else{
                            let obj=res.data.result.result
                            that.form.name=obj.name
                            that.form.mingzu=obj.ethnicity
                            that.form.birth=obj.birth
                            that.form.sex=obj.sex=='男'?1:2
                            that.form.sexs=obj.sex
                            that.form.id_card=obj.number
                            that.form.address=obj.address
                            
                            that.form.forward_url=res.data.url
                            Notify({ type: 'success', message: '身份识别正确' });
                        }
                        
                        
                    }else{
                       Notify({ type: 'warning', message: '识别失败' });
                    }
                });
            },
            onReadd: function(file) {
                let that = this;
                Toast.loading({
                    duration:0,
                    message: '上传中...',
                    forbidClick: true,
                });
                let formData = new FormData();
               
               if(file.length){
                    for(let i=0;i<file.length;i++){
                        formData.append('files', file[0].file);
                    }
               }else{
                  formData.append('file', file.file); 
               }
               
                let config = {
                    headers: {
                        Authorization,
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }
               
                axios.post(BASE+'/picture/uploadImg', formData, config).then(res => {
                    if(res.data.code===200){
                       
                    Toast.clear()
                       Notify({ type: 'success', message: '上传成功' });
                        that.form.pictureId=res.data.data.id
                        
                    }else{
                       Notify({ type: 'warning', message: '上传失败' });
                    }
                });
            },


            villageConfirm(val){
                this.form.communityId=val.id
                this.village=val.text
                this.villagePicker=false
            },
           onSubmit(val){
                var  re = /^1\d{10}$/    //正则表达式
                
                if (re.test(this.form.phone)) {      //判断字符是否是11位数字
                   
                }
                else {
                    Toast('请输入正确手机号')
                   return
                }
                if (this.form.idCard.length==18) {      //判断字符是否是11位数字
                   
                }
                else {
                    Toast('请输入正确身份证')
                   return
                }
                
               let that=this
                that.form.openId=openid
                Dialog.confirm({
                    title: '已确认提交？',
                    message: '',
                })
                .then(() => {
                    let that=this
                    Toast.loading({
                        duration:0,
                        message: '系统正在采集信息',
                        forbidClick: true,
                    });
                    api.add(that.form).then(e=>{
                        Toast.clear()
                        if(e.code===200){
                            Dialog.alert({
                                title: '提示',
                                message: '信息录入成功，请勿重复提交',
                            }).then(() => {
                           
                            });
                            Notify({ type: 'success', message: '录入成功' });
                        }
                    }).catch(err=>{
                        console.log()
                    })
                })
                .catch((err) => {
                    console.log(err)
                });
               
           }
        }
    }
</script>

<style scoped lang="scss">
@import "../common.scss";
  

</style>
